<template>
  <div>
    <el-col :span="12">
      <el-col :span="24" class="widget-view " style="padding:0px">
        <el-col :span="24" class="border-content" style="height:">
          <label _tmplitem="1" class="labeltitle " style="width:150px;">
            Apidoc地址：</label
          >
          <div _tmplitem="1" style="margin-left: 150px;">
            <el-input
              placeholder="请输入Apidoc地址"
              v-model="Apidoc"
              maxlength="50"
            ></el-input>
          </div>
        </el-col>
        <el-col :span="24" class="border-content" style="height:">
          <label _tmplitem="1" class="labeltitle " style="width:150px;">
            code路径：</label
          >
          <div _tmplitem="1" style="margin-left: 150px;">
            <el-input
              placeholder="请输入code路径"
              v-model="code"
              maxlength="50"
            ></el-input>
          </div>
        </el-col>
        <el-col :span="24" class="border-content" style="height:">
          <label _tmplitem="1" class="labeltitle " style="width:150px;">
            msg路径：</label
          >
          <div _tmplitem="1" style="margin-left: 150px;">
            <el-input
              placeholder="请输入msg路径"
              v-model="msg"
              maxlength="50"
            ></el-input>
          </div>
        </el-col>
        <el-col :span="24" class="border-content" style="height:">
          <label _tmplitem="1" class="labeltitle " style="width:150px;">
            data路径：</label
          >
          <div _tmplitem="1" style="margin-left: 150px;">
            <el-input
              placeholder="请输入data路径"
              v-model="queryPo"
              maxlength="50"
            ></el-input>
          </div>
        </el-col>
        <el-col :span="24" class="border-content" style="height:">
          <label _tmplitem="1" class="labeltitle " style="width:150px;">
            分页查询对象路径：</label
          >
          <div _tmplitem="1" style="margin-left: 150px;">
            <el-input
              placeholder="请输入分页查询对象路径"
              v-model="queryPo"
              maxlength="50"
            ></el-input>
          </div>
        </el-col>
        <el-col :span="24" class="border-content" style="height:">
          <label _tmplitem="1" class="labeltitle " style="width:150px;">
            Page路径：</label
          >
          <div _tmplitem="1" style="margin-left: 150px;">
            <el-input
              placeholder="请输入Page路径"
              v-model="page"
              maxlength="50"
            ></el-input>
          </div>
        </el-col>
        <el-col :span="24" class="border-content" style="height:">
          <label _tmplitem="1" class="labeltitle " style="width:150px;">
            PageSize路径：</label
          >
          <div _tmplitem="1" style="margin-left: 150px;">
            <el-input
              placeholder="请输入PageSize路径"
              v-model="pageSize"
              maxlength="50"
            ></el-input>
          </div>
        </el-col>
        <el-col :span="24" class="border-content" style="height:">
          <label _tmplitem="1" class="labeltitle " style="width:150px;">
            list路径：</label
          >
          <div _tmplitem="1" style="margin-left: 150px;">
            <el-input
              placeholder="请输入list路径"
              v-model="list"
              maxlength="50"
            ></el-input>
          </div>
        </el-col>
        <el-col :span="24" class="border-content" style="height:">
          <label _tmplitem="1" class="labeltitle " style="width:150px;">
            总行数路径：</label
          >
          <div _tmplitem="1" style="margin-left: 150px;">
            <el-input
              placeholder="请输入总行数路径"
              v-model="totalcount"
              maxlength="50"
            ></el-input>
          </div>
        </el-col>
        <div class="border-mult">
          <el-col :span="24" class="border-content" style="height:">
            <label _tmplitem="1" class="labeltitle " style="width:150px;">
              token：</label
            >
            <div _tmplitem="1" style="margin-left: 150px;">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入toten"
                v-model="toten"
              >
              </el-input>
            </div>
          </el-col>
        </div>
        <el-col :span="24">
          <el-button type="primary" @click="saveconfig">保存</el-button>
          <el-button @click="resetConfig">重置</el-button>
        </el-col>
      </el-col>
    </el-col>
    <el-col :span="12">
      Apidoc地址：是请求后端swagger请求域名地址,如果是本机：http://127.0.0.1:【程序端口】<br />
      例子1：如请求参数：{queryPo:{},page:12,pagesize:20}，请求结果{code：0，msg：“错误”，data：{total:255,page:12,pagesize:20,list:[]}}<br />
      code路径：是后端请求结果，判断是否成功的路径,返回结果为【例子1】，那该路径填写：code<br />
      msg路径：是后端请求结果，返回成功失败的消息路径，返回结果为【例子1】，那该路径填写：msg<br />
      data路径：是后端请求结果，返回的数据结果路径，返回结果为【例子1】，那该路径填写：data<br />
      分页查询对象路径：按照【例子1】，那该路径为：body.queryPo,备注：post参数前面需要body，url参数前面需加$query<br />
      Page路径：按照【例子1】，那该路径为：body.page,备注：post参数前面需要body，url参数前面需加$query<br />
      PageSize路径：按照【例子1】，那该路径为：body.pagesize,备注：post参数前面需要body，url参数前面需加$query<br />
      list路径：按照【例子1】，那该路径为：data.list<br />
      token：请求后端地址时需要的Token<br />
    </el-col>
  </div>
</template>
<script>
import { setStore, getStore } from '@/utils/store.js'
export default {
  data() {
    return {
      Apidoc: 'http://11.75.1.51:9999',
      code: 'code',
      msg: 'msg',
      data: 'data',
      queryPo: 'body.queryPo',
      page: 'body.pageNum',
      pageSize: 'body.pageSize',
      list: 'data.list',
      totalcount: 'data.totalcount',
      toten: ''
    }
  },
  methods: {
    saveconfig() {
      const swaggerconfig = {
        Apidoc: this.Apidoc,
        code: this.code,
        msg: this.msg,
        data: this.data,
        queryPo: this.queryPo,
        page: this.page,
        pageSize: this.pageSize,
        list: this.list,
        toten: this.toten,
        totalcount: this.totalcount
      }

      setStore({
        name: 'swaggerconfig',
        content: swaggerconfig,
        type: 'object'
      })
      this.$message.success('保存成功！')
    },
    resetConfig() {
      this.Apidoc = 'http://11.75.1.51:9999'
      this.code = 'code'
      this.msg = 'msg'
      this.data = 'data'
      this.queryPo = 'body.queryPo'
      this.page = 'body.pageNum'
      this.pageSize = 'body.pageSize'
      this.list = 'data.list'
      this.toten = ''
      this.totalcount = 'data.totalcount'
    }
  },
  created() {
    const swaggerconfiginfo = getStore({ name: 'swaggerconfig' })
    this.Apidoc = swaggerconfiginfo.Apidoc
    this.code = swaggerconfiginfo.code
    this.msg = swaggerconfiginfo.msg
    this.data = swaggerconfiginfo.data
    this.queryPo = swaggerconfiginfo.queryPo
    this.page = swaggerconfiginfo.page
    this.pageSize = swaggerconfiginfo.pageSize
    this.list = swaggerconfiginfo.list
    this.toten = swaggerconfiginfo.toten
    this.totalcount = swaggerconfiginfo.totalcount
  }
}
</script>
<style>
.labeltitle {
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 30px;
  /* padding: 0 12px 0 0; */
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: normal;
}
.border-title {
  height: 42px;
  line-height: 42px;
  padding-left: 15px;

  border-top: none;
  border-right: none;
}

.border-content {
  border-top: none;
  border-right: none;
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 0px;
  padding-bottom: 4px;
  height: 42px;
}

.border-mult .border-content {
  padding-top: 4px;
  height: auto;
  border-bottom: none;
}

.border-mult .border-title {
  height: auto;
  border-bottom: none;
  border-left: none;
  margin-left: -2px;
}
.required:before {
  content: '*';
  color: #c80000;
  font-size: 12px;
  vertical-align: top;
  display: inline-block;
  width: 10px;
  height: 10px;
  top: 2px;
  margin-left: -9px;
}
.el-input__inner {
  height: 35px;
  line-height: 35px;
}
</style>
